<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addApprovalAppointmentForm" ref="addApprovalAppointmentRef" :rules="addApprovalAppointmentrules">
            <!-- <el-form-item label="会议室ID" :label-width="formLabelWidth" prop="approvalMeetingRoomId"
                v-if="addApprovalAppointmentForm.id">
                <el-input v-model="addApprovalAppointmentForm.approvalMeetingRoomId" autocomplete="off" ref="name"
                    placeholder="请填写会议室ID"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime" v-if="addApprovalAppointmentForm.id">
                <el-input v-model="addApprovalAppointmentForm.startTime" autocomplete="off" ref="name"
                    placeholder="请填写开始时间"></el-input>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime" v-if="addApprovalAppointmentForm.id">
                <el-input v-model="addApprovalAppointmentForm.endTime" autocomplete="off" ref="name"
                    placeholder="请填写结束时间"></el-input>
            </el-form-item>
            <el-form-item label="预约主题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="addApprovalAppointmentForm.title" autocomplete="off" ref="name"
                    placeholder="请填写预约主题"></el-input>
            </el-form-item>
            <el-form-item label="人员编号" :label-width="formLabelWidth" prop="teacherNumber">
                <el-input v-model="addApprovalAppointmentForm.teacherNumber" autocomplete="off" ref="name"
                    placeholder="请填写人员编号"></el-input>
            </el-form-item>
            <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherName">
                <el-input v-model="addApprovalAppointmentForm.teacherName" autocomplete="off" ref="name"
                    placeholder="请填写人员姓名"></el-input>
            </el-form-item>
            <el-form-item label="预约描述" :label-width="formLabelWidth" prop="description">
                <el-input v-model="addApprovalAppointmentForm.description" autocomplete="off" ref="name"
                    placeholder="请填写预约描述"></el-input>
            </el-form-item>
            <el-form-item label="校区" :label-width="formLabelWidth" prop="campus" v-if="addApprovalAppointmentForm.id">
                <el-input v-model="addApprovalAppointmentForm.campus" autocomplete="off" ref="name"
                    placeholder="请填写校区"></el-input>
            </el-form-item> -->
            <el-form-item label="实验主题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="addApprovalAppointmentForm.title" autocomplete="off" ref="name"
                    placeholder="请填写实验主题"></el-input>
            </el-form-item>
            <el-form-item label="实验器材" :label-width="formLabelWidth" prop="title">
                <el-input v-model="addApprovalAppointmentForm.description" autocomplete="off" ref="name"
                    placeholder="请填写实验器材"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalAppointment",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addApprovalAppointmentForm: {
                // approvalMeetingRoomId: "",
                // startTime: "",
                // endTime: "",
                title: "",
                // teacherNumber: "",
                // teacherName: "",
                description: "",
                // campus: "",
            },
            // 校验规则
            addApprovalAppointmentrules: {
                title: vxRule(true, null, "blur"),
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                description: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getApprovalAppointmentById(id) {
            httpService("/javaApi/approvalAppointment/queryById", { id: id }, "get").then(
                (data) => {
                    // console.log(data);
                    this.addApprovalAppointmentForm = data.approvalAppointment;
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addApprovalAppointmentForm.id = "";
            this.addApprovalAppointmentForm.approvalMeetingRoomId = "";
            this.addApprovalAppointmentForm.startTime = "";
            this.addApprovalAppointmentForm.endTime = "";
            this.addApprovalAppointmentForm.title = "";
            this.addApprovalAppointmentForm.teacherNumber = "";
            this.addApprovalAppointmentForm.teacherName = "";
            this.addApprovalAppointmentForm.description = "";
            this.addApprovalAppointmentForm.campus = "";
        },
        save() {
            this.$refs.addApprovalAppointmentRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    // params.append("approvalMeetingRoomId", this.addApprovalAppointmentForm.approvalMeetingRoomId);
                    // params.append("startTime", this.addApprovalAppointmentForm.startTime);
                    // params.append("endTime", this.addApprovalAppointmentForm.endTime);
                    params.append("title", this.addApprovalAppointmentForm.title);
                    // params.append("teacherNumber", this.addApprovalAppointmentForm.teacherNumber);
                    // params.append("teacherName", this.addApprovalAppointmentForm.teacherName);
                    params.append("description", this.addApprovalAppointmentForm.description);
                    // params.append("campus", this.addApprovalAppointmentForm.campus);
                    if (this.addApprovalAppointmentForm.id) {
                        params.append("id", this.addApprovalAppointmentForm.id);
                        httpService("/javaApi/approvalAppointment/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getApprovalAppointmentList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/approvalAppointment/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getApprovalAppointmentList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style></style>